<template>
	<view class="bkg" @click="on_click">
		<!-- 卡片头部 -->
		<view class="case-header">
			<!-- tag -->
			<com-tag-editor class="tag-editor" :caseObj="caseObj" />
		</view>

		<!-- 标题和内容摘要 -->
		<view class="case-content">
			<view class="title">
				{{ caseObj.title }}
			</view>
		</view>

		<view class="case-key-time">
			<!-- 事故日期 -->
			<view class="key-time-item">
				<u-icon class="icon" color="#DD00FF" name="kefu-ermai"></u-icon>
				<view class="text">{{ act_date }}</view>
			</view>

			<view class="key-time-item">
				<u-icon class="icon" color="#0000FF" name="order"></u-icon>
				<view class="text">{{ courtdate }}</view>
			</view>
		</view>

		<!-- 卡片信息部分 -->
		<view class="case-info">
			<!-- 评论数 -->
			<!-- <view class="info-item">
				<u-icon class="icon" name="chat"></u-icon>
				<view class="text">12</view>
			</view> -->

			<!-- 附件数 -->
			<!-- <view class="info-item">
				<u-icon class="icon" color="#0000FF" name="bag"></u-icon>
				<view class="text">1</view>
			</view> -->

			<!-- 操作 -->
			<view class="info-item" v-on:click.stop="isShowActionMenu = true">
				<u-icon class="icon" color="#0000FF" name="more-dot-fill"></u-icon>
				<u-action-sheet :list="menuOptions" v-model="isShowActionMenu"></u-action-sheet>
			</view>
		</view>
	</view>
</template>

<script>
import comTagEditor from "../com-tag-editor/com-tag-editor.vue";

import moment from "moment";

const thisyear = moment().get("year");

export default {
	components: { comTagEditor },
	props: {
		caseObj: {
			type: Object,
			default: {},
		},
	},
	data() {
		return {
			isShowActionMenu: false,
			menuOptions: [
				{
					text: "点赞",
					color: "blue",
					fontSize: 28,
					subText: "感谢您的点赞",
				},
				{
					text: "分享",
				},
				{
					text: "评论",
				},
			],
		};
	},
	computed: {
		my_tag_list: function () {
			var filter_list = this.caseObj.tags.filter((r) => true);
			return filter_list;
		},
		act_date: function () {
			const actdate = moment(this.caseObj.actdate.$date);
			return thisyear == actdate.get("year")
				? actdate.format("M-D")
				: actdate.format("Y-M-D");
		},
		courtdate: function () {
			const curDate = moment(this.caseObj.courtdate.$date);
			return thisyear == curDate.get("year")
				? curDate.format("M-D")
				: curDate.format("Y-M-D");
		},
	},
	methods: {
		on_click() {
			this.$emit("card_click", this.caseObj);
		},
		showMenu() {
			

		},
	},
};
</script>

<style scoped lang="scss">
.bkg {
	min-height: 100rpx;
	width: 500rpx;
	margin: 12rpx;
	padding: 8rpx 12rpx;

	border-radius: 8rpx;
	background-color: white;
	box-shadow: 2rpx 2rpx 2rpx #cfcfcf;
}

// 标题区
.case-header {
	.tag-editor {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
}

.case-content {
	margin-left: 15rpx;
	min-height: 2em;
	.title {
		font-size: smaller;
		word-wrap: break-word;
		white-space: normal;
		word-break: normal;
		line-height: 1.3em;
	}
}

/* 关键时间节点 */
.case-key-time {
	display: flex;

	.key-time-item {
		display: flex;
		.icon {
			color: #b3b3b3;
			margin-left: 15rpx;
		}

		.text {
			font-size: x-small;
			margin-left: 5rpx;
		}
	}
}

/* 信息区 */
.case-info {
	display: flex;
	justify-content: flex-end;

	.info-item {
		display: flex;
		cursor: pointer;

		.icon {
			color: #b3b3b3;
			margin-left: 15rpx;
		}

		.text {
			font-size: x-small;
			margin-left: 5rpx;
		}
	}
}
</style>
